﻿@{
    //Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "用户管理";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <link href="~/Scripts/lib/element-ui/2.15.12/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/Scripts/lib/vue/2.7.6/vue.js"></script>
    <script src="~/Scripts/lib/element-ui/2.15.12/index.js"></script>
    <script src="~/Scripts/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <el-row>
        <div id="app">
            <el-row>
                <el-button type="primary" size="small" icon="el-icon-plus" v-on:click="add">新增</el-button>
                <el-button type="primary" size="small" icon="el-icon-refresh" v-on:click="reload">刷新</el-button>
            </el-row>
            <template>
                <el-table v-bind:data="tableData" size="mini" style="width: 100%" v-loading="loading"
                          element-loading-text="加载中"
                          element-loading-spinner="el-icon-loading"
                          element-loading-background="rgba(0, 0, 0, 0.8)">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" width="60" label="序号" align="center">
                        <template scope="scope1">
                            <span>{{scope1.$index + 1}}</span>
                            @*这里用插槽处理了，序号的问题*@
                        </template>
                    </el-table-column>
                    @*<el-table-column prop="uid" label="主键" width="180"></el-table-column>*@
                    <el-table-column prop="uAccount" label="账号" width="180"></el-table-column>
                    <el-table-column prop="uName" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="uPwd" label="密码"></el-table-column>
                    <el-table-column prop="uSex" label="性别" :formatter="sexf"></el-table-column>
                    <el-table-column prop="uAge" label="年龄"></el-table-column>
                    <el-table-column prop="uSF" label="省份"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" v-on:click="handleEdit(scope.row)">编辑</el-button>
                            <el-button v-on:click="handleDel(scope.row)" type="danger" size="mini">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- 分页器 -->
            <div class="block" style="margin-top:15px;">
                <el-pagination align='center'
                               v-on:size-change="handleSizeChange"
                               v-on:current-change="handleCurrentChange"
                               v-bind:current-page="currentPage"
                               v-bind:page-sizes="[1,5,10,20]"
                               v-bind:page-size="pageSize"
                               v-bind:total="total"
                               layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
            </div>

            <!-- Form 表单 -->
            <el-dialog v-bind:title="FormAttr.title" :visible.sync="FormAttr.dialogFormVisible" :close-on-click-modal="false">
                <el-form v-bind:model="form" :rules="rules" ref="ruleForm" v-bind:label-width="FormAttr.formLabelWidth" size="middle">
                    <el-form-item label="账号" prop="uName">
                        <el-input v-model="form.uName"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名" prop="uAccount">
                        <el-input v-model="form.uAccount"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="uPwd">
                        <el-input v-model="form.uPwd" placeholder="请输入密码" autocomplete="off" show-password>
                    </el-form-item>
                    @*<el-form-item label="确认密码" prop="uPwdConfirm">
                            <el-input v-model="form.uPwdConfirm" placeholder="请输入确认密码" autocomplete="off" show-password>
                        </el-form-item>*@
                    <el-form-item label="年龄" prop="uAge">
                        <el-input v-model.number="form.uAge" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="uSex">
                        <el-radio-group v-model="form.uSex">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="所在省份" prop="uSF">
                        <el-select v-model="form.uSF" placeholder="请选择">
                            <el-option v-for="item in listSF"
                                       :key="item.sID"
                                       :label="item.sName"
                                       :value="item.sID">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="submitForm('ruleForm')">提交</el-button>
                        <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </el-row>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            tableData: [], //表格数据
            currentPage: 1, // 当前页码
            total: 80, // 总条数
            pageSize: 5, // 每页的数据条数
            loading: true,
            //初始表单属性对象
            FormAttr: {
                title: "新增用户",
                formLabelWidth: "80px",
                dialogFormVisible: false,
            },
            listSF: [], //省份
            //初始表单对象
            form: {
                uName: '',
                uPwd: '',
                uAccount: '',
                uAge: null,
                uSex: null,
                uSF: null,
                uPwdConfirm: null
            },
            //自定义验证规则 :rules="rules"
            rules: {
                //uName 跟 prop="uName" 对应
                uName: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                uAccount: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
                uPwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
                ],
                uAge: [
                    { required: true, message: '年龄不能为空', trigger: 'blur' },
                    { type: 'number', message: '年龄必须为数字值' }
                ],
                uSex: [
                    { required: true, message: '性别不能为空', trigger: 'blur' },
                ],
                uSF: [
                    { required: true, message: '省份不能为空', trigger: 'blur' },
                ]
            }

        }, methods: {
            add: function (event) {
                app.form = {};
                app.FormAttr.dialogFormVisible = true;
                /* app.$refs['ruleForm'].resetFields();*/
                app.FormAttr.title = "新增用户";
            },
            //提交表单 参数 formName 对应 ref="ruleForm"
            submitForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var url = '/SysUsers/add';
                        if (app.FormAttr.title != "新增用户") {
                            url = '/SysUsers/Update';
                        }
                        $.ajax({
                            type: "POST",
                            url: url,
                            data: app.form,
                            dataType: "json",
                            async: true,
                            success: function (result) {
                                if (result.code == 1) {
                                    app.$message({ type: 'success', message: app.FormAttr.title + '成功!' });
                                    loadTable();
                                } else {
                                    app.$message.error("新增失败");
                                }
                            },
                            beforeSend: function () { },
                            error: function () { },
                            complete: function () { }
                        });

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //表单重置
            resetForm: function (formName) {
                this.$refs[formName].resetFields();
            },
            //刷新
            reload: function () {
                loadTable();
            },
            //编辑
            handleEdit(row) {
                /*app.$refs['ruleForm'].resetFields();*/
                app.form = {};
                app.FormAttr.title = '编辑用户';
                row.uSex = row.uSex + "";  //这两个控件把类型给转换了
                row.uSF = parseInt(row.uSF);
                app.form = row;
                app.FormAttr.dialogFormVisible = true;
            },
            //删除
            handleDel(row) {
                //console.log(row);

                this.$confirm('此操作将永久删除!, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var ids = [row.uid];
                    delUser(ids);
                }).catch(() => {
                    //this.$message({
                    //    type: 'info',
                    //    message: '已取消删除'
                    //});
                });
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log('每页 ' + val + ' 条');
                this.currentPage = 1;
                this.pageSize = val;
                loadTable();
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log('当前页: ' + val + '');
                this.currentPage = val;
                loadTable();
            },
            //性别格式化
            sexf(row, column) {
                return row.uSex == '1' ? "男"
                    : row.uSex == '0' ? "女"
                        : "无";
            }
        }

    })

    $(function () {
        loadTable();
        loadSF();
    });
    //加载省份信息
    function loadSF() {
        $.ajax({
            type: "get",
            url: '/SF/GetList?r=' + Math.random(),
            dataType: "json",
            async: false,
            success: function (result) {
                if (result.code == 0) {
                    app.listSF = result.data;
                }
            },
            beforeSend: function () {
            },
            error: function () { },
            complete: function () { }
        });
    }
    function loadTable() {
        app.loading = true;
        $.ajax({
            type: "get",
            url: '/SysAdmin/SysUsers/GetList?page=' + app.currentPage + '&limit=' + app.pageSize + '&r=' + Math.random(),
            dataType: "json",
            async: true,
            success: function (result) {
                if (result.code == 0) {
                    if (app.tableData.length > 0) {
                        app.tableData.splice(0, app.tableData.length);
                    }
                    app.tableData = result.data;
                }
                app.loading = false;
                app.total = result.total;

            },
            beforeSend: function () {
            },
            error: function () { },
            complete: function () { }
        });
    }

    function delUser(ids) {
        $.ajax({
            type: "post",
            url: '/SysUsers/Delete',
            dataType: "json",
            data: { "ids": ids },
            async: true,
            success: function (result) {
                if (result.code == 1) {
                    app.$message({ type: 'success', message: '删除成功!' });
                    loadTable();
                } else {
                    app.$message.error("删除失败");
                }
            },
            beforeSend: function () {
            },
            error: function () { },
            complete: function () { }
        });
    }

</script>

